<template>
	<div class="header-cont">
		<div class="header">
			<div class="logo">
				<img src="../assets/img/logo.png" alt="">
				<span>河南省高职高专图书情报信息网</span>
			</div>
			<div class="menu-list">
				<el-menu class="el-menu-sy" mode="horizontal" background-color="rgba(0,0,0,0)" text-color="#fff"
					:default-active="path" active-text-color="#fff" :router="true">
					<el-menu-item index="/">首页</el-menu-item>
					<!-- @click.native="handleSelectMenu('/Notice?id=222')" -->
					<el-submenu index="2">
						<template slot="title">新闻通知</template>
						<el-menu-item index="/News?id=2486">新闻动态</el-menu-item>
						<el-menu-item index="/News?id=2487">通知公告</el-menu-item>
						<el-menu-item index="/Member">成员馆风采</el-menu-item>
					</el-submenu>
					<el-menu-item index="/InfoHome">信息素养</el-menu-item>
					<el-menu-item index="/AbilityHome">馆员能力提升</el-menu-item>
					<el-menu-item index="/ReadHome">阅读推广</el-menu-item>
					<el-menu-item index="/MatchHome">竞赛平台</el-menu-item>
				</el-menu>
				<div class="line"></div>
				<div class="login">
					<div class="avatar" @click="goPage('/UserInfo')">
						<img v-if="avatarImg" :src="avatarImg" alt="">
						<img v-else src="../assets/img/home_user.png" alt="">
					</div>
					<span class="login-btn" v-if="!name" @click="goRegister">注册</span>
					<span class="login-btn" v-if="!name">/</span>
					<span class="login-btn" v-if="!name" @click="goPage('/Login')">登录</span>
					<span class="login-btn" v-if="name">{{user.deptName + ' ' + name}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				path: this.$route.path,
				token: this.$cookies.get('sy_token'),
				avatarImg: this.$cookies.get('sy_avatar'),
				name: this.$cookies.get('sy_username'),
				user: this.$cookies.get('sy_userInfo'),
			}
		},
		computed: {
			avatar() {
				return this.$store.state.app.avatar; //需要监听的属性
			},
			nickName() {
				return this.$store.state.app.nickName; //需要监听的属性
			},
			isLogin() {
				return this.$store.state.app.token;
			},
			userInfo() {
				return this.$store.state.app.userInfo;
			},

		},
		methods: {
			routerSelect(index) {
				let list = ['/Lesson', '/Simulation', '/Match', '/UserInfo']
				if (!this.token) {
					let i = list.findIndex(item => {
						return item == index
					})
					if (i != -1) {
						this.$confirm('您还未登陆，没有权限，请登陆后重试！', '提示', {
							confirmButtonText: '去登陆',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$router.push('/Login')
						}).catch(() => {

						});
					} else {
						this.$router.push(index)
					}
				} else {
					this.$router.push(index)
				}
			},
			goPage(url) {
				this.$router.push(url)
			},
			goRegister() {
				this.$router.replace({
					path: '/Register'
				})
			},
			handleSelectMenu(path) {
				this.$router.push(path)
			}
		},
		watch: {
			avatar(n, o) {
				this.avatarImg = n
			},
			nickName(n, o) {
				this.name = n
			},
			isLogin(n, o) {
				this.token = n
			},
			userInfo(n, o) {
				this.user = n
			},
			$route() {
				this.path = this.$route.path
			}
		}
	}
</script>

<style lang="less">
	.header-cont {
		width: 100%;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		// background: linear-gradient(90deg, #7535FF 0%, #5178FF 100%);
		background-color: #2a82e4;

		.header {
			width: 1280px;
			height: 60px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.logo {
			display: flex;
			align-items: center;
			height: 100%;

			img {
				width: 40px;
				margin-right: 10px;
			}

			span {
				transform: translateY(4px);
				font-size: 24px;
				font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
				font-weight: bold;
				color: #000;
				// line-height: 40px;
			}

			// width: 103px;
			// height: 34px;
			// background-color: #ccc;
		}

		.menu-list {
			display: flex;
			align-items: center;
		}

		.menu {
			display: flex;
			align-items: center;
		}

		.menu-item {
			margin: 0 25px;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			cursor: pointer;
		}

		.line {
			width: 1px;
			height: 30px;
			background-color: #fff;
			margin: 0 40px 0 15px;
		}

		.login {
			display: flex;
			align-items: center;
		}

		.avatar {
			margin-right: 13px;
		}

		.avatar {
			width: 30px;
			height: 30px;
			border-radius: 30px;
			overflow: hidden;
		}

		.login-btn {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
			cursor: pointer;
		}

		.el-submenu__title i {
			color: #fff;
		}

		.el-menu.el-menu--horizontal {
			border: none;
		}

		// 更改鼠标划过背景色字体色及borer显示
		.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
			background: transparent !important;
			color: #fff;
			border-bottom: 1px solid #fff !important;
		}

		.el-menu--horizontal .el-submenu__title:hover {
			background: transparent !important;
			color: #fff;
			border-bottom: 1px solid #fff !important;
		}


	}

	.el-menu--horizontal>.el-menu-item {
		font-size: 20px;
		padding: 0 10px;
	}

	.el-menu--horizontal>.el-submenu .el-submenu__title {
		font-size: 20px;
		padding: 0 10px;
	}

	.el-dropdown-menu__item,
	.el-menu-item {
		font-size: 20px;
		padding: 0 10px;
	}

	.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
	.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
		color: #0087FF;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.el-menu--horizontal .el-menu--popup-bottom-start {
		background-color: #5178ff !important;
		color: #fff;
	}

	.el-menu--horizontal .el-menu--horizontal {
		background-color: #5178ff !important;
		color: #fff;
	}

	.el-submenu__title i {
		color: #fff;
	}
</style>